<template>
  <div class="setting">
    <div class="cell-group group-1">
      <ul>
        <li>
          <i class="icon"></i>
          <span>免密码支付设置</span>
        </li>
        <li>
          <i class="icon"></i>
          <span>免拼设置</span>
        </li>
        <li>
          <i class="icon"></i>
          <span>消息接收设置</span>
        </li>
      </ul>
    </div>
    <div class="cell-group group-2">
      <ul>
        <li>
          <i class="icon"></i>
          <span>常见问题</span>
        </li>
        <li>
          <i class="icon"></i>
          <span>意见反馈</span>
        </li>
      </ul>
    </div>
    <div class="cell-group group-3">
      <ul>
        <li>
          <i class="icon"></i>
          <span>商家免费入住</span>
        </li>
        <li>
          <i class="icon"></i>
          <span>关于拼多多</span>
        </li>
      </ul>
    </div>
    <div class="exit" @click="loginOut()">
      退出登录
    </div>
  </div>
</template>

<script>
  import { MessageBox } from 'mint-ui'

  export default {
    name: 'setting',
    methods: {
      loginOut () {
        MessageBox.confirm('确定退出吗?').then(action => {
          if (action === 'confirm') {
            localStorage.removeItem('pdd_user')
            this.$router.replace('/personal')
          }
        })
      }
    }
  }
</script>

<style scoped lang="stylus" ref="stylesheet/stylus">
  .setting
    position fixed
    left 0
    right 0
    top 0
    bottom 0
    background #f5f5f5

    .exit
      width 100%
      height 50px
      text-align center
      line-height 50px
      margin-top 15px
      font-size 17px
      color #333
      background #fff

    .cell-group
      ul
        li
          width 100%
          height 50px
          background #fff
          display flex
          justify-content left
          align-items center
          padding-left 15px
          border-bottom 1px solid #f5f5f5

          i
            width 25px
            height 25px

          span
            font-size 16px
            color #333
            margin-left 15px

    .group-1
      ul
        li
          &:nth-child(1)
            .icon
              background url("../images/icon-key.png") no-repeat
              -webkit-background-size: cover
              background-size: cover

          &:nth-child(2)
            .icon
              background url("../images/icon-setting.png") no-repeat
              -webkit-background-size: cover
              background-size: cover

          &:nth-child(3)
            .icon
              background url("../images/icon-msg.png") no-repeat
              -webkit-background-size: cover
              background-size: cover

    .group-2
      margin-top 15px

      ul
        li
          &:nth-child(1)
            .icon
              background-image url("../images/personal_sprite_v11.png")
              background-position: -138px -426px
              width: 38px
              height: 38px
              zoom 0.7

          &:nth-child(2)
            .icon
              background url("../images/personal_sprite_v11.png")
              background-position: -602px -426px
              width: 40px
              height: 40px
              zoom 0.7

    .group-3
      margin-top 15px

      ul
        li
          &:nth-child(1)
            .icon
              background-image url("../images/icon-seller.png")
              -webkit-background-size: cover
              background-size: cover

          &:nth-child(2)
            .icon
              background url("../images/icon-setting.png")
              background-size: cover


</style>
